<template>
  <div>
    <el-container>
      <el-main>
        <el-col :span="6" class="grid">
          <el-input
            v-model="form.FoodCategory"
            placeholder="请输入类别"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <el-button
            type="primary"
            @click="onSubmitFood"
            style="margin-bottom: 10px"
            >添加商品</el-button
          >
        </el-col>
        <!-- 数据请求最重要的一句话 -->
        <el-table :data="showTable" border style="width: 100%">
          <el-table-column prop="FoodId" label="商品ID" width="150">
          </el-table-column>
          <el-table-column prop="FoodName" label="商品名称" width="150">
          </el-table-column>
          <el-table-column prop="FoodCode" label="商品编号" width="150">
          </el-table-column>
          <el-table-column prop="FoodCategory" label="商品类别" width="150">
          </el-table-column>
          <el-table-column prop="FoodPrice" label="商品价格" width="150">
          </el-table-column>
          <el-table-column prop="FoodQuantity" label="商品销量" width="150">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--  <el-button
                    type="success"
                    size="small"
                    @click="onEdit(scope.row.UserDataID)"
                    >修改</el-button
                  > -->
              <el-button
                type="primary"
                size="small"
                @click="onEditFood(scope.row.FoodId)"
                icon="el-icon-edit"
                >修改</el-button
              >
              <!-- <el-button
                  type="danger"
                  size="small"
                  @click="onDelete(scope.row.UserDataID)"
                  >删除</el-button
                > -->
              <el-button
                type="danger"
                size="small"
                @click="onDelete(scope.row.FoodId)"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </el-main>
    </el-container>
    <editFood ref="editFood" @onRefresh="onRefresh"></editFood>
    <InsertFood ref="InsertFood" @onRefresh="onRefresh"></InsertFood>
  </div>
</template>

<script>
import { getFoodList, deleteFoodInfo } from "@/api/food";
import editFood from "./editFood";
// import { insertFoodInfo } from "@/api/food";
import InsertFood from "./InsertFood";
export default {
  components: { editFood, InsertFood },
  data() {
    return {
      nowTime: new Date(),
      tableData: [],
      filterShowtable: [],
      form: {
        FoodName: "",
        FoodCode: "",
        FoodCategory: "",
        FoodPrice: "",
        FoodQuantity: "",
      },
      currentPage: 1, //初始页
      pagesize: 8, //    每页的数据
    };
  },
  //获取全部商品数据
  created() {
    this.getFoodList();
  },
  mounted() {
    //获取时间
    let that = this;
    this.timer = setInterval(function () {
      that.nowTime = new Date().toLocaleString();
    });
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    //添加商品模块
    onSubmitFood() {
      this.$refs["InsertFood"].onOpen();
    },
    //获取列表数据模块
    getFoodList() {
      this.tableData = [];
      getFoodList().then((response) => {
        if (response.code == 0) {
          this.tableData = response.data;
          // console.log(this.tableData);
        } else {
          this.$message.error("获取列表出错！原因：" + response.msg);
        }
      });
    },
    onRefresh() {
      this.getFoodList();
    },
    onEditFood(foodId) {
      console.log(foodId);
      this.$refs["editFood"].onOpen(foodId);
    },
    onDelete(foodId) {
      console.log(foodId);
      this.$confirm("此操作将永久删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = { foodId: foodId };
          deleteFoodInfo(data).then((response) => {
            if (response.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.onRefresh();
            } else {
              this.$message.error("删除失败！原因：" + response.msg);
            }
          });
        })
        .catch(() => {});
    },

    //分页
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleUserList() {
      this.$http.get("http://localhost:64352/food/GetFoodList").then((res) => {
        //这是从本地请求的数据接口，
        this.tableData = res.body;
      });
    },
    //实现过滤功能
  },
  computed: {
    showTable() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>


<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
span {
  margin-right: 5px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 30px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header div {
  display: flex;
  align-items: center;
}
.el-header img {
  width: 50px;
  height: 50px;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.timeEnter .iconfont {
  font-size: 25px;
  margin-right: 5px;
}
.toggle-button .iconfont {
  font-size: 20px;
  line-height: 24px;
}
.toggle-button span {
  font-size: 14px;
  vertical-align: top;
}
</style>

